<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue v-model Demo</title>
  <script src="https://unpkg.com/vue@3.4.13/dist/vue.global.js"></script>
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .section {
      margin-bottom: 40px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>Vue v-model Demo</h1>

      <!-- Basic v-model -->
      <section class="section" v-if="currentSection === 'basic'">
        <h2>Basic v-model</h2>
        <child-component v-model="count"></child-component>
        <p>Current Count: {{ count }}</p>
        <button @click="count = 0">Reset</button>
      </section>

      <!-- v-model with parameter -->
      <section class="section" v-if="currentSection === 'parameter'">
        <h2>v-model with Parameter</h2>
        <input v-model="bookTitle" placeholder="Enter book title">
        <p>Book Title: {{ bookTitle }}</p>
        <child-component-with-title v-model:title="bookTitle"></child-component-with-title>
      </section>

      <!-- Multiple v-models -->
      <section class="section" v-if="currentSection === 'multiple'">
        <h2>Multiple v-models</h2>
        <user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>
        <p>Full Name: {{ firstName }} {{ lastName }}</p>
      </section>

      <!-- v-model modifiers -->
      <section class="section" v-if="currentSection === 'modifiers'">
        <h2>v-model Modifiers</h2>
        <input
          v-model.capitalize="myText"
          placeholder="Enter text (capitalize first letter)"
        >
        <p>Modified Text: {{ myText }}</p>
      </section>

      <!-- Section Navigation -->
      <div class="nav">
        <button @click="currentSection = 'basic'">Basic</button>
        <button @click="currentSection = 'parameter'">Parameter</button>
        <button @click="currentSection = 'multiple'">Multiple</button>
        <button @click="currentSection = 'modifiers'">Modifiers</button>
      </div>
    </div>
  </div>

  <script type="module">
    const { createApp, defineComponent } = Vue;

    const COUNT_OPTIONS = {
      default: 0
    };

    const ChildComponent = defineComponent({
      props: {
        modelValue: Number,
        modelOptions: Object
      },
      emits: ['update:modelValue'],
      setup(props, { emit }) {
        function increment() {
          emit('update:modelValue', props.modelValue + 1);
        }

        return {
          increment
        };
      },
      template: `
        <div class="child-component">
          <div>Parent bound value: {{ modelValue }}</div>
          <button @click="increment">Increment</button>
        </div>
      `
    });

    const ChildComponentWithTitle = defineComponent({
      props: ['title'],
      emits: ['update:title'],
      setup(props, { emit }) {
        function updateTitle(newTitle) {
          emit('update:title', newTitle);
        }
        return {
          updateTitle
        };
      },
      template: `
        <div class="child-component">
          <div>Parent bound title: {{ title }}</div>
        </div>
      `
    });

    const UserName = defineComponent({
      props: ['firstName', 'lastName'],
      emits: ['update:firstName', 'update:lastName'],
      setup() {
        return {};
      },
      template: `
        <div class="child-component">
          <input
            type="text"
            placeholder="First Name"
            :value="firstName"
            @input="$emit('update:firstName', $event.target.value)"
          >
          <input
            type="text"
            placeholder="Last Name"
            :value="lastName"
            @input="$emit('update:lastName', $event.target.value)"
          >
        </div>
      `
    });

    createApp({
      components: {
        ChildComponent,
        ChildComponentWithTitle,
        UserName
      },
      data() {
        return {
          currentSection: 'basic',
          count: COUNT_OPTIONS.default,
          bookTitle: '',
          firstName: '',
          lastName: '',
          myText: ''
        };
      }
    }).mount('#app');
  </script>
</body>
</html>